<template >
    <div class="app-container">
        <!-- 查询条件 -->
        <el-card v-if="state.showSearch">
            <el-form ref="queryRef" :inline="true" :model="state.queryParams" label-width="68px">
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="getDataList">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!--制作表格-->
        <el-card style="margin-top: 20px;" >
            <el-row :gutter="10" class="mb20">
                 <el-col :span="1.5"  >
                     <el-button  type="primary" plain icon="Plus"
                     @click="addOrUpdateHandle(undefined, 0)" >新增类型</el-button>
                 </el-col>
                 <el-col :span="1.5">
                     <el-button type="info" plain icon="Sort"
                     @click="toggleExpandAll">展开/折叠</el-button>
                 </el-col>
            </el-row>
            <el-table
                v-if="refreshTable" v-loading="state.dataListLoading" :data="state.rows"
                 style="width: 100%"    row-key="categoryId"
                     :default-expand-all="isExpandAll" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                     <el-table-column label="编号" align="center" prop="categoryId" width="400px" />
                     <el-table-column label="名称" align="center" prop="categoryName" width="400px" />

                <el-table-column label="图片" align="center" widt h="300px">
                    <template #default="scope">
                       <img v-if="scope.row.categoryImageSrc" :src="scope.row.categoryImageSrc" width="200" align="center"/>
                    </template>
                </el-table-column>



                <el-table-column label="操作" align="center" width="400px" class-name="small-padding fixed-width">
                    <template #default="scope">

                     <el-button

                         link type="primary" plain icon="Plus"
                               @click="addOrUpdateHandle(scope.row.categoryId,  0)">
                              新增
                        </el-button>


                     <!-- <template v-if=" scope.row.superId==null">
                         <el-button
                          link type="primary" plain icon="Plus"
                           @click="addOrUpdateHandle(undefined,scope.row.categoryId)">
                         新增
                         </el-button>
                     </template> -->

                      <el-button
                    link type="primary" icon="Edit"
                     @click="addOrUpdateHandle(scope.row.categoryId, 1)">修改</el-button>

                    </template>
                </el-table-column>

            </el-table>

        </el-card>

       <!-- 引用新增或修改的界面 -->
       <add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>

    </div>
</template>

<script lang="ts" setup name="Storecategory">
import {IHooksOptions} from '@/hooks/hooksinterface';
import {useCrud} from '@/hooks/hooksservice';
/* eslint-disable camelcase */
import { ref, reactive,  getCurrentInstance, ComponentInternalInstance,nextTick} from 'vue';

//引用新增修改组件页
import AddOrUpdate from './add-and-edit.vue';
import { category } from '@/api/app/store/category';

// 获取当前vue3的页面this对象转换为proxy代理，查询 sys_dict_data表中的值
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

//是否展开节点
const isExpandAll = ref(false);
//刷新表格
const refreshTable = ref(true);

//定义接口，后台请求的API，以及查询条件的表单对象
const state: IHooksOptions = reactive({
    queryApi: category,
    deleteApi: undefined,
    exportApi: undefined,
    //不是分页
    isPage: false,
    //主键名称
    primaryKey:'categoryId',
    queryForm:  {
    }
});

/** 展开/折叠操作 */
function toggleExpandAll() {
    refreshTable.value = false;
    isExpandAll.value = !isExpandAll.value;
    nextTick(() => {
        refreshTable.value = true;
    });
}

//vue3中叫组合式函数
const { getDataList,  deleteHandle, deleteBatchHandle }=useCrud(state);


// 调用新增或修改页面的方法
const addOrUpdateRef = ref();
//新增或修改的时候传递id
const addOrUpdateHandle = (categoryId?: number| undefined, tag: number) => {

    //调用它里面的init方法
    addOrUpdateRef.value.init(categoryId,  tag);
};


</script>

<style></style>
